{% extends "public/layout.html" %}

{% block css %}
<style>

        #contain img{margin: 10px auto;}
        #time{margin-top:10px;}
        #contain button{margin-top:2px; }
        #sec_product{min-height: 30px;margin-top:10px;}
        #sec_product button{margin-right:4px;}

    </style>

{% endblock %}



{% block body %}

    <div id="one_product" class="text-left">
        {% for product in products %}
            <button class="btn btn-primary" type="button" id="{{ product.id }}">{{ product.name }}</button>
        {% endfor %}
    </div>
    <div id="sec_product" class="text-left">


    </div>
    <div id="time" class="text-left">
        <button class="btn btn-success" type="button" data="-30min">半小时</button>
        <button class="btn btn-default" type="button" data="-5h">5小时</button>
        <button class="btn btn-default" type="button" data="-12h">12小时</button>
        <button class="btn btn-default" type="button" data="-1d">1天</button>
        <button class="btn btn-default" type="button" data="-3d">3天</button>
        <button class="btn btn-default" type="button" data="-7d">7天</button>
    </div>
    <div id="metric_images"></div>
{% endblock %}

{% block js %}

<script>
    var one_product_buttons;        // 所有的一级业务线按钮
    var sec_product_div = $("#sec_product");
    var metric_images_div = $("#metric_images")
    var metric_images_objs = null;
    var sec_product_buttons;        // 当前二级业务线所有的按钮
    var one_product_id;             // 用户当前点击的一级业务线ID
    var sec_product_id;             // 用户当前点击的二级业务线ID

    var flag = true;

    var hostlist_objs = null;
    var metrics = null;
    var time = "-30min";
    var graphite_api = "{{ graphite_api }}";
    var graphite_conf = "{{ graphite_conf }}";
    var width = 900;
    var height = 300;
    var loading_src='/static/images/loading.jpg';



    function get_hostlist(){
        if(flag){
            $.ajax({
                url: "/server/get/",
                data: {"server_purpose":sec_product_id},
                async: false,
                success: function(res){
                    hostlist_objs = res;
                }
            });

        }
    }

    function get_metrics() {
        if(flag){
            $.ajax({
                url: "/graphite/group/key/",
                data: {"id":sec_product_id},
                async: false,
                success: function(res){
                    metrics = res.data;
                }
            });

        }
    }

    function get_target(metric_obj){
        var target = "";
        $.each(hostlist_objs, function(num, host_obj){
            target += "&target=aliasByNode(" + host_obj.fields.hostname + "." + metric_obj.name+",0)" ;
        });

        target += "&yUnitSystem="+ metric_obj.type + "&title=" + metric_obj.title;
        return target

    }

    function initiaze(){
        var html = "<img class='graphite_img'  src='/static/images/loading.jpg'/></br>";
        if(flag){
            metric_images_div.empty();
            $.each(metrics, function(i, obj){
                metric_images_div.append(html)
            });
            metric_images_objs = $(".graphite_img")
        }

    }

    function loading(){
        /*
        $.each(metric_images_objs, function(i, obj){
            metric_images_objs.eq(i).prop("src", loading_src)
        })
        */
        metric_images_objs.prop('src', loading_src)
    }


    function flush(){
        var now = new Date().getTime();
        $.each(metrics, function(i, obj){
            target = get_target(obj);
            // target=zabbix.cpu.load1&target=test.cpu.load1&target=tanshuai.cpu.load1
            var img_url = graphite_api + graphite_conf +"&width=" + width +"&height=" + height + target+ "&from=" + time +"&t=" + now;
            setTimeout(function(){
                metric_images_objs.eq(i).prop('src', img_url);
            },50);

        })

    }

    function show_metrics(){
        get_hostlist();
        get_metrics();
        initiaze();
        flag = false;
        flush()
    }

    function get_sec_product(id){
        $.get("/server/product/get/", {"pid": id}, function(res){
            sec_product_div.empty();
            $.each(res, function(i, obj){
                html = '<button class="btn btn-info" type="button" id="'+ obj.pk +'">'+obj.fields.name +'</button>';
                sec_product_div.append(html);
            });
            sec_product_buttons = sec_product_div.find("button");

            // 当用户点击二级业务线
            sec_product_buttons.click(function(){
                var click_obj = $(this);
                click_obj.removeClass("btn-info").addClass("btn-success").siblings(".btn-success").removeClass("btn-success").addClass("btn-info");
                sec_product_id = click_obj.attr("id");
                flag = true;
                show_metrics()
            })
        })
    }



    $(function(){
        one_product_buttons = $("#one_product button");
        // 当用户点击的是一级业务线
        one_product_buttons.click(function(){
            var click_obj = $(this)
            click_obj.removeClass("btn-primary").addClass("btn-success").siblings(".btn-success").removeClass("btn-success").addClass("btn-primary");
            one_product_id = click_obj.attr("id");
            get_sec_product(one_product_id)
        });

        // 调整时间
        $("#time button").click(function(){
            var click_obj = $(this);
            click_obj.removeClass("btn-default").addClass("btn-success").siblings(".btn-success").removeClass("btn-success").addClass("btn-default");
            time = click_obj.attr("data");
            loading();
            flush()
        });

        // 按时间加载
        setInterval(function(){
            flush();
        },10000);

    })
</script>
{% endblock %}
